$o-brand: "internal";
$polyfill-logo: "../img/logo.svg";
$system-code: "origami-polyfill-service";

@import "o-normalise/main.scss";
@include oNormalise();

@import "o-footer-services/main.scss";
@include oFooterServices(
	$opts: (
		"icons": (
			"github"
		)
	)
);

@import "o-forms/main.scss";
@include oForms();

@import "o-syntax-highlight/main.scss";
@include oSyntaxHighlight(
	$opts: (
		"languages": (
			"html"
		)
	)
);

@import "o-tabs/main.scss";
@include oTabs(
	$opts: (
		"button-tabs": (
			("type": "secondary")
		)
	)
);

@import "o-tooltip/main.scss";
@include oTooltip();

@import "o-header-services/main";
@include oHeaderServices(
	$opts: (
		"types": (
			"primary-nav"
		),
		"features": (
			"drop-down"
		),
		"logo": $polyfill-logo
	)
);

@import "o-layout/main";
@include oLayout();

@import "o-table/main";
@include oTable(
	$opts: (
		"lines",
		"row-headings"
	)
);

@import "o-buttons/main";

@include oButtons(
	$opts: (
		"themes": (
			"mono"
		),
		"icons": (
			"more"
		),
		"types": (
			"primary",
			"secondary"
		)
	)
);

.core .o--if-js,
.enhanced .o--if-no-js {
	display: none !important;
}

#features-list [aria-hidden="true"] {
	display: none !important;
}

[data-o-component="o-tooltip"] {
	display: none;
}

.o-tabs__tabpanel {
	position: relative;

	button {
		position: absolute;
		right: 0;
		top: -1px;
		background: rgb(255, 255, 255);
	}

	pre {
		margin-top: 0;
		height: 24px;
	}
}

.o-forms {
	padding: 0;
}

.polyfill {
	position: relative;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	padding-left: 8px;
	padding-top: oSpacingByName('s1');
	padding-bottom: oSpacingByName('s1');

	&:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	label {
		flex-grow: 1;
	}

	.tooltip-button {
		border: 0;
	}
}

.o-tooltip .o-tooltip-content {
	hyphens: unset;
	white-space: nowrap;
	max-height: 50vh;

	> :last-child {
		margin-bottom: 8px;
	}
}

img {
	display: inline-block;
	max-width: 100%;
}

.o-layout__hero:before {
	background-image: url("../img/home-page-hero.jpg");
}
svg {
	display: none;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 490px) {
	.o-website__hero--home {
		padding: 0;
	}
	.o-website__hero--home.o-layout__hero:before {
		content: none;
	}
	.o-website__hero--home svg {
		display: block;
		width: 100vw;
	}
	.o-website__hero--text {
		position: absolute;
		pointer-events: none;
	}
}
